<template>
  <el-date-picker
    :placeholder="$t(placeholder, 'select')"
    :start-placeholder="$t(startPlaceholder, 'start_date')"
    :end-placeholder="$t(endPlaceholder, 'end_date')"
    :disabled-date="disabledDate"
    :prefix-icon="prefixIcon"
  ></el-date-picker>
</template>

<script lang="ts" setup>
import SvgIcon from '@/icons/svg-icon/index.vue'
import * as EL from '@/utils/element'
import { useI18n } from 'vue-i18n'

const props = withDefaults(
  defineProps<{
    placeholder?: string
    startPlaceholder?: string
    endPlaceholder?: string
    disabledDate?: (data: Date) => boolean
    prefixIcon?: object
    i18n?: boolean
    i18nPrefix?: string
  }>(),
  {
    disabledDate: EL.disabledDate,
    prefixIcon: () =>
      h(SvgIcon, {
        name: 'form-rili'
      })
  }
)

const { t } = useI18n()
const $t = (text: string | undefined, def: string) => {
  return props.i18n && text
    ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text)
    : text || t(`component.zform.placeholder.${def}`)
}
</script>

<style lang="scss"></style>
